<!-- 张沐泉 著 2021.4 -->
<!-- 本体 -->
<template>
	<div>
		<div id="wrap" :class="!isFull?'content':'contents'" v-if="!loading" ref="Scroll" v-cloak>
			<div :class="['echarts', !isFull?'vertical_echarts':'landscape_echarts']"
				v-if="!zhu_option_type && !zhe_type">
				<span :class="!isFull?'hengping':'shuping'">
					<span :class="['iconfont', !isFull?'icon-hengping':'icon-shuping' ]"
						@click='columnar("zhe_three")'></span>
				</span>

				<span class="flowTitle" v-if="!isFull">
					<span class="flowimg"></span>
					<span class="flowname">多条折线图</span>
				</span>
				<echarts :isFull='isFull' :optiondata='zhe_three' uuid='zhe_three' width="95%" height='6'></echarts>
			</div>

			<div :class="['echarts', !isFull?'vertical_echarts':'landscape_echarts']"
				v-if="!zhe_type && !zhe_three_type">
				<span :class="!isFull?'hengping':'shuping'">
					<span :class="['iconfont', !isFull?'icon-hengping':'icon-shuping' ]"
						@click='columnar("zhu")'></span>
				</span>

				<span class="flowTitle" v-if="!isFull">
					<span class="flowimg"></span>
					<span class="flowname">柱状图</span>
				</span>
				<echarts :isFull='isFull' :optiondata='zhu_option' uuid='zhu' width="95%" height='6'></echarts>
			</div>

			<div :class="['echarts', !isFull?'vertical_echarts':'landscape_echarts']"
				v-if="!zhu_option_type && !zhe_three_type">
				<span :class="!isFull?'hengping':'shuping'">
					<span :class="['iconfont', !isFull?'icon-hengping':'icon-shuping' ]"
						@click='columnar("zhe")'></span>
				</span>

				<span class="flowTitle" v-if="!isFull">
					<span class="flowimg"></span>
					<span class="flowname">折线图</span>
				</span>
				<echarts :isFull='isFull' :optiondata='zhe' uuid='zhe' width="95%" height='6'></echarts>
			</div>

		</div>
		<!-- 过渡动画 -->
		<div class="loading" v-else>
			<van-loading type="spinner">加载中...</van-loading>
		</div>
	</div>

</template>

<script>
	import echarts from '../components/echarts.vue'
	export default {
		inject:['reload'],
		data() {
			return {
				isFull: false, //判断echarts图是否被点击
				zhu_option_type: false, //判断当前echarts图是否被点击
				zhu_option: null,
				zhe: null,
				zhe_type: false,
				zhe_three_type: false,
				zhe_three: null,
				loading: false,
				scrollTop: 0, //滚动条距顶部的距离
				scrollNum: 0, //点击全屏后的滚动条距离
			}

		},
		created() {},
		mounted() {
			document.querySelector("#wrap").addEventListener('scroll', () => {
				//监听滚动条的高度
				this.scrollTop = document.querySelector("#wrap").scrollTop;
			}, true)
		},
		methods: {
			columnar(e) {
				this.isFull = !this.isFull;
				this.loading = true;
				// 全屏展示完后滚动条回到原来位置
				if (this.isFull) {
					this.scrollNum = this.scrollTop;
				}
				if (e == "zhu") {
					this.zhu_option_type = !this.zhu_option_type;
				} else if (e == "zhe") {
					this.zhe_type = !this.zhe_type;
				} else if (e == "zhe_three") {
					this.zhe_three_type = !this.zhe_three_type;
				}
				setTimeout(() => {
					this.loading = false;
					//滚动条事件处理
					this.$nextTick(() => {
						this.$refs.Scroll.scrollTop = this.scrollNum;
					})
				}, 1000)
			}

		},
		created() {
			// 指定图表的配置项和数据
			this.zhu_option = {
				dataZoom: [{
					type: 'inside'
				}],
				grid: {
					x: 30,
					y: 20,
					x2: 10,
					y2: 30,
					// borderWidth: 60
				},
				xAxis: {
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: '#CFCFCF'
						}
					},
					axisTick: {
						show: false
					},
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				},
				yAxis: {
					type: 'value',
					"axisLine": { //y轴
						"show": false,
					},
					"axisTick": { //y轴刻度线
						"show": false
					},
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: '#CFCFCF'
						}
					},
					splitLine: { //网格线
						show: true,
						lineStyle: {
							color: ['#F7F7F7'],
							width: 1,
							type: 'solid'
						}
					}
				},
				series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}]
			};
			this.zhe = {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line'
				}]
			};
			this.zhe_three = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					}
				},
				legend: {
					data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
						name: '邮件营销',
						type: 'line',
						stack: '总量',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: '联盟广告',
						type: 'line',
						stack: '总量',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
						name: '视频广告',
						type: 'line',
						stack: '总量',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: [150, 232, 201, 154, 190, 330, 410]
					},
					{
						name: '直接访问',
						type: 'line',
						stack: '总量',
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: [320, 332, 301, 334, 390, 330, 320]
					},
					{
						name: '搜索引擎',
						type: 'line',
						stack: '总量',
						label: {
							show: true,
							position: 'top'
						},
						areaStyle: {},
						emphasis: {
							focus: 'series'
						},
						data: [820, 932, 901, 934, 1290, 1330, 1320]
					}
				]
			};
		},
		components: {
			echarts
		},
		watch: {

		}
	}
</script>

<style scoped="scoped" lang="less">
	@import url("../assets/iconfont.css");

	* {
		margin: 0;
		padding: 0;
	}
	
	[v-cloak]{
	  display: none;
	}

	.loading {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contents {
		width: 100%;
		height: 100vh;
		background: #fff;
		overflow: hidden;
	}

	.content {
		width: 100%;
		height: 100vh;
		background: #ededed;
		overflow: auto;
	}

	.echarts {
		position: relative;
	}

	.iconfont {
		font-size: .4rem;
	}

	.hengping {
		display: flex;
		height: .4rem;
		width: .4rem;
		position: absolute;
		top: .3rem;
		right: .3rem;
	}

	.shuping {
		display: flex;
		height: .4rem;
		width: .4rem;
		z-index: 999;
		position: absolute;
		top: .1rem;
		right: -7.7rem;
	}

	.landscape_echarts {
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}

	.vertical_echarts {
		width: 95%;
		background-color: #fff;
		margin: .3rem auto;
		border-radius: 10px;
	}

	.landscape {
		width: 100vh;
		height: 100vw;
		font-size: .4rem;
	}

	.vertical {
		width: 100%;
		height: 5rem;
		font-size: .4rem;
	}

	.flowTitle {
		display: flex;
		width: 100%;
		height: 1rem;
		align-items: center;

		.flowimg {
			display: block;
			width: 5px;
			height: .45rem;
			background-color: #318FDF;
			border-radius: 2px;
			margin: 0 .25rem;
		}

		.flowname {
			display: block;
			height: .5rem;
			line-height: .5rem;
			font-size: .4rem;
			font-weight: 700;
			color: #373737;
		}
	}
</style>
